<template>
  <div>
    <!-- 页头 -->
    <div class="page-header">
      <a-page-header @back="$router.go(-1)" :title="isEdit ? '编辑文章' : '创建文章'">
        <template #extra>
          <a-button :loading="saveLoading" @click="save" type="primary">
            <template #icon>
              <icon-save />
            </template>
            保存
          </a-button>
        </template>
      </a-page-header>
    </div>
    <!-- form表单 -->
    <a-form ref="formRef" :model="form" layout="vertical">
      <a-form-item field="title" :rules="{ required: true, message: '请输入文章的标题' }" label="标题">
        <a-input v-model="form.title" placeholder="请填写文章的标题" />
      </a-form-item>
      <a-form-item :rules="{ required: true, message: '请选择文章分类' }" field="category" label="分类">
        <a-select v-model="form.category" placeholder="请选择文章分类">
          <a-option>软件开发</a-option>
          <a-option>系统运维</a-option>
          <a-option>软件测试</a-option>
        </a-select>
      </a-form-item>
      <a-form-item field="summary" label="概要">
        <a-textarea v-model="form.summary" :auto-size="{ minRows: 4, maxRows: 4 }" placeholder="请填写文章的概要信息"
          allow-clear />
      </a-form-item>
      <a-form-item field="content" label="文章内容">
        <MdEditor class="editor" v-model="form.content" />
      </a-form-item>
    </a-form>
  </div>
</template>

<script setup>
import { onMounted, reactive, ref, useTemplateRef } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { MdEditor } from 'md-editor-v3';
import 'md-editor-v3/lib/style.css';
import { CREATE_BLOG, DESCRIBE_BLOG, UPDATE_BLOG } from '@/api/blog'

const formInstance = useTemplateRef("formRef")

// 查询当前页面的路由信息
const route = useRoute()
const isEdit = ref(route.query.id ? true : false)
const router = useRouter()

onMounted(async () => {
  if (isEdit.value) {
    const resp = await DESCRIBE_BLOG(route.query.id)
    Object.assign(form, { ...resp })
  }
})


const form = reactive({
  title: '',
  summary: '',
  content: '',
  category: '',
  tags: {}
})

// 文章的保存
const saveLoading = ref(false)
const save = () => {
  if (isEdit.value) {
    // 更新
    formInstance.value.validate(async (errors) => {
      if (errors === undefined) {
        try {
          saveLoading.value = true
          await UPDATE_BLOG(route.query.id, form)
        } finally {
          saveLoading.value = false
        }
      }
    })
  } else {
    // 数据提交给后端之前，我们是需要前端校验数据合法性
    // formInstance.validate()
    // formInstance
    // https://cn.vuejs.org/guide/essentials/template-refs.html
    formInstance.value.validate(async (errors) => {
      if (errors === undefined) {
        try {
          saveLoading.value = true
          const resp = await CREATE_BLOG(form)
          router.replace({ name: 'backend_blog_edit', query: { id: resp.id } })
          isEdit.value = true
        } finally {
          saveLoading.value = false
        }
      }
    })
  }
}

</script>

<style lang="css" scoped>
.editor {
  height: calc(100vh - 100px);
}
</style>
